<template>
    <div>
        <form>
            账号: <input type="text" v-model="account.username"/>
            密码:<input type="text" v-model="account.password" />
        </form>
        <form>
            账号: <input type="text" v-model="username"/>
            密码:<input type="text" v-model="password" />
        </form>
        <hr>

        <show-info :name="name" :age="age"></show-info>
</div>
</template>
<script>
import { reactive ,ref} from 'vue'
import ShowInfo from './ShowInfo.vue'
    export default {
        components:{ShowInfo},
        setup(){
            // 定义响应数据:reactive/ref
            // 强调:ref也可以定义复杂的数据
            const info = ref({})
            const name = ref('inzv')
            const age = ref(18)
            console.log(info.value)
            // 1.reactive的应用场景
            // 1.1 条件一:reactive应用本地的数据
            // 1.2 条件二: 多个数据之间有关系/联系(聚合的数据,组织在一起有特定的作用)
                const account = reactive({
                    username:"name",
                    password:'123456'
                })
                const username = ref('name')
                const password = ref('12345')
                return{
                    account,
                    username,
                    password,
                    name,
                    age
                }
        }
    }
</script>